<template>
    <div class="employmentModule">
        <Row>
            <Table :loading="loading" border :columns="columns" :data="data" stripe sortable="custom" @on-sort-change="changeSort" ref="table"></Table>
        </Row>

    </div>
</template>

<script>
import { getTwoToDo } from '@/api/activiti';

export default {
    data() {
        return {
            loading: false,
            columns: [],
            columns_1: [
                {
                    title: '标题',
                    key: 'title',
                    className: 'demo-table-info-column-title'
                    // sortable: true,
                },
                {
                    title: '原因',
                    key: 'reason',
                    className: 'demo-table-info-column'
                },
                {
                    title: '提交学校',
                    key: 'schoolName',
                    className: 'demo-table-info-columnColor'
                    // minWidth: 120,
                    // sortable: false,
                },
                {
                    title: '提交时间',
                    key: 'createTime',
                    sortable: true
                    // minWidth: 120,
                },

                {
                    title: '操作',
                    key: 'action',
                    width: 170,
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.seeView(params.row);
                                        }
                                    }
                                },
                                '查看'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row);
                                        }
                                    }
                                },
                                '忽略'
                            )
                        ]);
                    }
                }
            ],
            data: [
                { username: 'XXXX学校提交XXX同学的删除申请需要审核', name: '该生于XX年X月X日已退学', unit_name: 'XXX学校', department_title: '2023-07-01' },
                { username: 'XXXX学校提交XXX同学的删除申请需要审核', name: '该生于XX年X月X日已退学', unit_name: 'XXX学校', department_title: '2023-06-02' }
                // {username: 'XXXX学校提交XXX同学的删除申请需要审核', name: '该生于XX年X月X日已退学', unit_name: 'XXX学校', department_title: 'yyy-mm-dd'},
            ]
        };
    },
    methods: {
        init() {
            this.getDataList();
        },
        // 获取表格数据
        getDataList() {
            this.loading = true;
            getTwoToDo().then(res => {
                this.loading = false;
                if (res.success) {
                    this.data = res.result;
                    console.log("事项提醒数据",res.result);
                }
            });
        },
        // 排序
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order == 'normal') {
                this.searchForm.order = '';
            }
            this.getDataList();
        },
        // 改变单行颜色
        rowClassName(row, index) {
            if (index === 1) {
                return 'demo-table-info-row';
            } else if (index === 3) {
                return 'demo-table-error-row';
            }
            return '';
        },
        //   分页
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        seeView(e) {
            let query = {
                id: e.id,
                jyId: e.jyId,
                type: '3',
                backRoute: 'home_index',
                applyId: e.applyerUserid,
                tId: e.tid,
                procInstId: e.procInstId
            };
            this.$router.push({
                name: 'jyqx',
                query: query
            });
        },
        async remove(e) {
            let res = await this.postRequest('/actTask/hl', { businessKey: e.businessKey });
            if (res.success) {
                this.getDataList();
            }
        },
        onRestWindow() {
            this.columns = this.restTableCellWidth(this.columns_1)
        }
    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        this.init();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    },
};
</script>

<style scoped lang="less">
.employmentModule {
    width: 100%;
    height: 100%;

    /deep/ .ivu-table-wrapper {
        width: 100%;
        //border: none !important;
    }

    /deep/ .ivu-table {
        width: 100%;
        //height: 100%;
        .ivu-table-header {
            border: none;

            table {
                border: none;

                thead {
                    tr {
                        th {
                            background: none;
                            border: none;
                            border-bottom: 1px solid rgb(238, 238, 238);

                            .ivu-table-cell {
                                span {
                                    color: rgb(177, 177, 177);
                                }
                            }
                        }

                        th:last-child {
                            border-right: none;
                        }
                    }
                }

                tbody {
                    border: none;
                }
            }
        }
    }

    /deep/ .ivu-table .demo-table-info-row td {
        background: none;
        //background-color: #2db7f5;
        //color: #fff;
    }

    /deep/ .ivu-table .demo-table-error-row td {
        background-color: rgb(236, 247, 255);
    }

    /deep/ .ivu-table td.demo-table-info-column-title {
        color: #000;
        font-weight: bold;
    }

    /deep/ .ivu-table td.demo-table-info-column {
        color: rgb(255, 162, 61);
    }

    /deep/ .ivu-table td.demo-table-info-columnColor {
        color: rgb(103, 178, 245);
    }
}
</style>
